<template>
	<div>
		
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
		  <el-breadcrumb-item>菜单列表</el-breadcrumb-item>
		</el-breadcrumb>
		
		<el-card class="box-card">
		  <el-row :gutter="18">			  
			  <el-col :span="2">
			  		<el-button type="info" @click="getMenuList()" icon="el-icon-refresh">刷新</el-button>
			  </el-col>
			  <el-col :span="7">
				  <el-button type="primary" icon="el-icon-plus" @click="addVisible=!addVisible">添加</el-button>
			  </el-col>
		  </el-row>
		  
		  <!-- 列表 -->
		  <el-table
		      :data="tableData"
			  row-key="id"
			  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"			  
		      style="width: 100%">
			  
			  <el-table-column
			        type="selection"
			        width="55">
			      </el-table-column>
		      <el-table-column
		        label="名称"
		        prop="name">
		      </el-table-column>
			  
		      <el-table-column
		        label="显示"
		        prop="status">
				<template slot-scope="scope">
				<el-switch
				  v-model="scope.row.status"
				  :active-value="1"
				  :inactive-value="0"				  
				  active-color="#13ce66"
				  inactive-color="#ff4949">
				</el-switch>
				</template>
		      </el-table-column>			  
			  			  
			  <el-table-column			    
			    label="操作">
			  	<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" content="编辑" placement="top">
						  <el-button type="success" icon="el-icon-edit" size="mini" @click="editDialog(scope.row)"></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="删除" placement="top">
						  <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)"></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="追加" placement="top">
						  <el-button type="primary" icon="el-icon-plus" @click="appendDialog(scope.row)" size="mini"></el-button>
					</el-tooltip>			  						
			  	</template>
			  </el-table-column>
			  
		    </el-table>		  
		</el-card>
		
		<!-- 添加菜单 -->
		<el-dialog
		  title="添加菜单"
		  :visible.sync="addVisible"
		  align="left"
		  @close="closeAddDialog"
		  width="50%">
		  
		  <el-form :model="addForm" :rules="addFormRul" ref="addFormRef" label-width="100px">
			  
		      <el-form-item label="名称" prop="name" >
		        <el-input v-model="addForm.name" autocomplete="off"></el-input>
		      </el-form-item>
			  
		      <el-form-item label="父级" prop="parent_id" >
		        <el-select v-model="addForm.parent_id" placeholder="请选择父级">
					<el-option  label="最父级" :value="0">最父级</el-option>
		          <el-option v-for="item in selectData" :key="item.id"
				   :label="item.name"
					:value="item.id">
					<span v-if="item.pleft >0" :style="'padding-left:'+item.pleft+'px;'">└</span>
					<span>{{ item.name }}</span>
					
				  </el-option>
		        </el-select>
		      </el-form-item>
			  
			  <el-form-item label="路径" prop="path" >
			    <el-input v-model="addForm.path" placeholder="请输入控制器/方法名" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="排序" prop="order" >
			    <el-input v-model="addForm.order" placeholder="值越大越靠前" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="图标" prop="icon" >
			    <el-input v-model="addForm.icon" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-row>
				<el-col>
					<el-form-item label="显示" prop="status">
					  <el-switch 
					  :active-value="1"
					  :inactive-value="0"
					  active-color="#13ce66"
					  inactive-color="#ff4949"
					  v-model="addForm.status"></el-switch>
				  </el-form-item>
			  </el-col>			  
			  <el-col>
			  <el-form-item label="记录日志" prop="is_log">
			      <el-switch 
				  :active-value="1"
				  :inactive-value="0"
				  active-color="#13ce66"
				  inactive-color="#ff4949"
				  v-model="addForm.is_log"></el-switch>
			  </el-form-item>
			  </el-col>
			  </el-row>
		    </el-form>		  
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addVisible = false">取 消</el-button>
		    <el-button type="primary" @click="add" >确 定</el-button>
		  </span>
		</el-dialog>
		
		<!-- 编辑菜单 -->
		<el-dialog
		  title="编辑菜单"
		  :visible.sync="editVisible"
		  align="left"		  
		  width="50%">
		  
		  <el-form :model="editForm" :rules="editFormRul" ref="editFormRef" label-width="100px">
			  
		      <el-form-item label="名称" prop="name" >
		        <el-input v-model="editForm.name" autocomplete="off"></el-input>
		      </el-form-item>
			  
		      <el-form-item label="父级" prop="parent_id" >
		        <el-select v-model="editForm.parent_id" placeholder="请选择父级">					
					<el-option  label="最父级" :value="0">最父级</el-option>
		          <el-option v-for="item in selectData" :key="item.id"
		             :label="item.name"
		          	:value="item.id">
		          	<span v-if="item.pleft >0" :style="'padding-left:'+item.pleft+'px;'">└</span>
		          	<span>{{ item.name }}</span>
		          	
		            </el-option>
		          </el-select>
		      </el-form-item>
			  
			  <el-form-item label="路径" prop="path" >
			    <el-input v-model="editForm.path" placeholder="请输入控制器/方法名" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="排序" prop="order" >
			    <el-input v-model="editForm.order" placeholder="值越大越靠前" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="图标" prop="icon" >
			    <el-input v-model="editForm.icon" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-row>
				<el-col>
					<el-form-item label="显示" prop="status">
					  <el-switch 
					  :active-value="1"
					  :inactive-value="0"
					  active-color="#13ce66"
					  inactive-color="#ff4949"
					  v-model="editForm.status"></el-switch>
				  </el-form-item>
			  </el-col>			  
			  <el-col>
			  <el-form-item label="记录日志" prop="is_log">
			      <el-switch 
				  :active-value="1"
				  :inactive-value="0"
				  active-color="#13ce66"
				  inactive-color="#ff4949"
				  v-model="editForm.is_log"></el-switch>
			  </el-form-item>
			  </el-col>
			  </el-row>
		    </el-form>		  
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editVisible = false">取 消</el-button>
		    <el-button type="primary" @click="edit" >确 定</el-button>
		  </span>
		</el-dialog>
		
		
	</div>
</template>

<script>
	export default {
		data(){
			return {
				search_input:'',
				tableData:[],
				selectData:[],
				addVisible:false,
				addForm:{
					parent_id:'',
					name:'',
					order:'',
					path:'',
					icon:'',
					status:'',					
					is_log:''
				},
				addFormRul:{
					parent_id:[
						{ required: false, message: '请选择父级！', trigger: 'blur'}
					],
					name:[
						{ required: true, message: '请输入名称！', trigger: 'blur'},
						{ min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
					],
					order:[
						{ required: true, message: '请输入排序！', trigger: 'blur'},
						{ min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur'}
					],
					path:[
						{ required: true, message: '请输入路径！', trigger: 'blur'},
						{ min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
					],
					icon:[
						{ required: false, message: '请输入图标！', trigger: 'blur'},
						{ min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
					]
				},
				editVisible:false,
				editForm:{
					id:'',
					parent_id:'',
					name:'',
					order:'',
					path:'',
					icon:'',
					status:'',
					is_log:''
				},
				editFormRul:{
					parent_id:[
						{ required: false, message: '请选择父级！', trigger: 'blur'}
					],
					name:[
						{ required: true, message: '请输入名称！', trigger: 'blur'},
						{ min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
					],
					order:[
						{ required: true, message: '请输入排序！', trigger: 'blur'},
						{ min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur'}
					],
					path:[
						{ required: true, message: '请输入路径！', trigger: 'blur'},
						{ min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
					],
					icon:[
						{ required: false, message: '请输入图标！', trigger: 'blur'},
						{ min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
					]
				}
			}
		},
		methods:{
			getMenuList(){
				this.$http.get('menu').then(res => {
					if(res.data.code !== 200) return this.$message.error(res.data.msg);	
					this.tableData = res.data.data;
					console.log(res);
				});
			},
			getSelectData(){				
				this.$http.get('menu/getSelectTree').then(res => {
					if(res.data.code !== 200) return this.$message.error(res.data.msg);	
					this.selectData = res.data.data;					
					console.log(res);
				});
			},
			handleEdit(index,row){
				console.log(row);
			},
			handleDelete(){
				
			},
			closeAddDialog(){
				this.$refs.addFormRef.resetFields();
			},
			//提交添加数据
			add(){				
				this.$refs.addFormRef.validate(valid=>{
					if(!valid) return this.$message.error("请输入正确的信息！");
					this.$http.post("menu",this.addForm).then(res=>{
						if(res.data.code ===200){
							this.$message.success(res.data.msg);
							this.addVisible = false;
							this.getMenuList();
						}
					});
				});
				
			},
			//编辑菜单
			editDialog(row){				
				this.editForm.id = row.id;
				this.editForm.parent_id = row.parent_id;
				this.editForm.name = row.name;
				this.editForm.order = row.order.toString();
				this.editForm.path = row.path;
				this.editForm.icon = row.icon;
				this.editForm.status = row.status;
				this.editForm.is_log = row.is_log;
				
				this.editVisible = true;
			},
			edit(){
				this.$refs.editFormRef.validate(valid=>{
					if(!valid) return this.$message.error("请输入正确的信息！");
					this.$http.put(`menu/${this.editForm.id}`,this.editForm).then(res=>{
						if(res.data.code ===200){
							this.$message.success(res.data.msg);
							this.editVisible = false;
							this.getMenuList();
						}
					});
				});
			},
			//删除菜单
			del(row){
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.$http.delete(`menu/${row.id}`).then(res=>{
						if(res.data.code === 200){
							this.$message.success(res.data.msg);
							this.getMenuList();
						}else{
							this.$message.error(res.data.msg);
						}
					});			  
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			},
			//追加
			appendDialog(row){
				this.addForm.parent_id = row.id;
				this.addVisible = true;
			}
		},
		created(){
			this.getMenuList();
			this.getSelectData();
		}
	}
</script>

<style>

</style>
